<template>
  <div id="floorBox1" class="floorBox">

    <div style="padding-top: 0.5vh;width: 99%;margin: 0 auto;height: 6vh;color: white;font-size: 1.8vh;text-align: left;">
      <div style="display: inline;float: left;margin-left: 1vh;border-left: 6px #409EFF solid;"><span style="margin-left: 1vh;">楼层信息</span></div>
      <div style="display: inline;float: left;margin-left: 10vh;width: 15vh;">楼层:<span style="margin-left: 1vh;" attr="floorName">{{floorData.floorName}}</span></div>
      <div style="display: inline;float: left;margin-left: 5vh;width: 15vh;">面积:<span style="margin-left: 1vh;" attr="floorArea" >{{floorData.floorArea}}</span>㎡</div>
      <div style="display: inline;float: left;margin-left: 5vh;width: 15vh;">高度:<span style="margin-left: 1vh;" attr="floorHeight">{{floorData.floorHeight}}</span>m</div>

      <div style="display: inline;float: right;">
        <el-button size="small" type="primary" icon="el-icon-circle-plus-outline" @click="createHome">新建房间</el-button>
        <el-button size="small" type="primary" icon="el-icon-edit" @click="updateFloor">修改楼层</el-button>
        <el-button size="small" type="primary" icon="el-icon-connection" @click="cloneFloor">复制楼层</el-button>
        <el-button size="small" type="danger" icon="el-icon-delete" @click="removeFloor">删除楼层</el-button>
      </div>

    </div>

    <div style="width: 95%;margin:0 auto;">
      <roomTemplate v-for='(roomData,index) in floorData.roomDataArrs' v-bind:key="index" :roomData="roomData" :index="index" @removeRoom="removeRoom" @cloneRoom="cloneRoom" ></roomTemplate>
    </div>
    <div style="height: 2vh;"></div>


    <!-- 新建房间信息 -->
    <el-dialog title="房间信息" width="120vh"  :visible.sync="dialogFormVisible" align="left">

      <el-form ref="roomForm"  :rules="roomRules"  label-width="80px" label-suffix	=":" align="left"  style="margin-top: 1.5vh;color: #FFFFFF;"  :inline="true" :model="roomForm" >

        <el-form-item  label="名称" prop="room_name">
          <el-input v-model="roomForm.room_name"></el-input>
        </el-form-item>

        <el-form-item  label="长度" prop="room_length">
          <el-input v-model="roomForm.room_length">
            <i slot="suffix" style="font-style:normal;margin-right: 10px;">m</i>
          </el-input>
        </el-form-item>

        <el-form-item  label="高度" prop="room_height">
          <el-input v-model="roomForm.room_height">
            <i slot="suffix" style="font-style:normal;margin-right: 10px;">m</i>
          </el-input>
        </el-form-item>

        <el-form-item  label="厚度" prop="room_width">
          <el-input v-model="roomForm.room_width">
            <i slot="suffix" style="font-style:normal;margin-right: 10px;">m</i>
          </el-input>
        </el-form-item>

        <el-form-item  label="面积" prop="room_area">
          <el-input v-model="roomForm.room_area">
            <i slot="suffix" style="font-style:normal;margin-right: 10px;">㎡</i>
          </el-input>
        </el-form-item>

        <el-form-item  label="位置" prop="room_location">
          <el-input v-model="roomForm.room_location">
           </el-input>
        </el-form-item>


      </el-form>

      <div id="wallDiv" style="width: 100%;height: auto;">
        <wallTemplate  ref="wallComponent"  v-for='(wallData,index) in roomForm.wallDataArrs' v-bind:key="index" :wallData="wallData" :index="index" @removeWall="removeWall" @cloneWall="cloneWall"></wallTemplate>
      </div>


      <div slot="footer" class="dialog-footer">
        <el-button type="primary" size="small" icon="el-icon-circle-plus-outline" @click="createWall" >新建墙面</el-button>
        <el-button type="primary" size="small" icon="el-icon-circle-check" @click="saveRoom" >保存</el-button>
        <el-button type="primary" icon="el-icon-circle-close" size="small" @click="dialogFormVisible = false;">取 消</el-button>
      </div>
    </el-dialog>
    <!-- 新建房间信息 -->



  </div>






</template>

<script>
  import wallTemplate from '../loadSimulation/wallTemplate'
  import roomTemplate from './roomTemplate'

  export default {
    name: 'floorTemplate',
    components: {
      wallTemplate,
      roomTemplate
    },
    data() {
      return {
        dialogFormVisible : false,
        roomForm : {
          room_id : '',//房间id
          room_name : '',
          room_length : '',
          room_width : '',
          room_height : '',
          room_area : '',
          room_location : '',
          wallDataArrs:[

          ],
          index : ''
        },
        roomRules: {
          room_name: [
            { required: true, message: '请输入房间名称', trigger: 'blur' },
            { min: 1, max: 10, message: '长度在 1 到 10 个字符', trigger: 'blur' }
          ],
          room_length: [
            { required: true, message: '请输入房间长度', trigger: 'blur' },
            { min: 1, max: 10, message: '长度在 1 到 10 个字符', trigger: 'blur' }
          ],
          room_width: [
            { required: true, message: '请输入房间厚度', trigger: 'blur' },
            { min: 1, max: 10, message: '长度在 1 到 10 个字符', trigger: 'blur' }
          ],
          room_height: [
            { required: true, message: '请输入房间高度', trigger: 'blur' },
            { min: 1, max: 10, message: '长度在 1 到 10 个字符', trigger: 'blur' }
          ],
          room_area: [
            { required: true, message: '请输入房间面积', trigger: 'blur' },
            { min: 1, max: 10, message: '长度在 1 到 10 个字符', trigger: 'blur' }
          ],
          room_location: [
            { required: true, message: '请输入房间位置', trigger: 'blur' },
            { min: 1, max: 10, message: '长度在 1 到 10 个字符', trigger: 'blur' }
          ]
        }
      }
    },
    props: {
      floorData:{
        layer_id :'',//楼层id
        floorName : '',
        floorArea : '',
        floorHeight : '',
        roomDataArrs:[

        ]
      },
      index : ''
    },

    mounted() {

    },
    methods: {

      cloneObj:function (obj) {
        var newObj = {};
        if (obj instanceof Array) {
          newObj = [];
        }
        for (var key in obj) {

          var isId = key.substring(key.length-"_id".length)=="_id";

          var val = obj[key];

          if(isId){
            val = '';
          }

          //newObj[key] = typeof val === 'object' ? arguments.callee(val) : val; //arguments.callee 在哪一个函数中运行，它就代表哪个函数, 一般用在匿名函数中。
          newObj[key] = typeof val === 'object' ? this.cloneObj(val): val;
        }
        return newObj;
      },

      /*新建房间*/
      createHome : function(){
        this.dialogFormVisible = true;
      },
      /* 保存房间以及墙面窗户信息 */
      saveRoom : function(){

        this.$refs['roomForm'].validate((valid) => {

          if (valid) {

            var wallComponent = this.$refs.wallComponent;


            if(typeof(wallComponent)!= "undefined"){

              var validateWall = true;

              for(var i = 0;i<wallComponent.length;i++){
                validateWall = wallComponent[i].validateWall();
                if(!validateWall){
                  break;
                }
              }

              if(validateWall){

                //获取所有维护的房间以及房间下的墙面信息以及墙面下的窗户信息

                var validateWindow = true;

                for(var i = 0;i<wallComponent.length;i++){
                  var windowComponent = wallComponent[i].$refs.windowComponent;
                  for(var j = 0;j<windowComponent.length;j++){
                    validateWindow = windowComponent[j].validateWindow();
                    if(!validateWindow){
                      break;
                    }
                  }
                }

                if(validateWindow){

                  var roomDataArrs = this.floorData.roomDataArrs;
                  if (typeof(roomDataArrs)== "undefined"){
                    this.floorData.roomDataArrs = [];
                  }
                  this.floorData.roomDataArrs.push(this.roomForm);
                  this.dialogFormVisible = false;
                  this.roomForm = {
                    room_id : '',
                    room_name : '',
                    room_length : '',
                    room_width : '',
                    room_height : '',
                    room_location : '',
                    wallDataArrs:[

                    ],
                    index : ''
                  };

                }else{
                  return;
                }



              }else{
                return;
              }

            }else{

              //获取所有维护的房间以及房间下的墙面信息以及墙面下的窗户信息

              var roomDataArrs = this.floorData.roomDataArrs;
              if (typeof(roomDataArrs)== "undefined"){
                this.floorData.roomDataArrs = [];
              }
              this.floorData.roomDataArrs.push(this.roomForm);
              this.dialogFormVisible = false;
              this.roomForm = {
                room_id : '',
                room_name : '',
                room_length : '',
                room_width : '',
                room_height : '',
                room_location : '',
                wallDataArrs:[

                ],
                index : ''
              };



            }


          }
        });


      },

      cloneRoom : function(index){

        //根据子组件传递的index，在index后的位置，复制一个相同的房间节点
        var roomData = this.floorData.roomDataArrs[index];
        var newRoomData = this.cloneObj(roomData);
        newRoomData.room_id = '';
        this.floorData.roomDataArrs.splice(index+1,0,newRoomData);
        this.$forceUpdate();

      },
      removeRoom : function(index){

        this.$confirm('是否确认删除该房间信息，删除时将同步删除房间下级关联节点！', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',

          type: 'warning'
        }).then(() => {

          var removeObj =  this.floorData.roomDataArrs.splice(index,1);
          this.$forceUpdate();

          if(removeObj!=null&&removeObj!=""){
            this.$http.post("/iepsapi/fhfz/sceneSettings/deleteRoom?", {removeObj}).then((res) => {
              this.$message({
                type: 'success',
                message: '删除成功!'
              });
            })
          }else{
            this.$message({
              type: 'success',
              message: '删除成功!'
            });
          }

        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });

      },

      /*修改楼层*/
      updateFloor : function(){
        this.$emit('updateFloor', this.index)
      },
      /*复制楼层*/
      cloneFloor : function(){
        this.$emit('cloneFloor', this.index)
      },
      /*删除楼层*/
      removeFloor : function(){
        this.$emit('removeFloor', this.index)
      },
      /* 新建墙面信息 */
      createWall : function(){
        var wallData = {
            wall_id : '',//墙面id
            wall_name : '', //墙面名称
            wall_location : '', //墙面位置
            wall_thick : '', //墙面厚度
            wall_width : '',//墙面高度
            wall_length : '',//长度
            wall_angle : '',//墙面倾斜角度
            wall_structure : '',//材质
            windowDataArrs:[

            ],
        };
        this.roomForm.wallDataArrs.push(wallData);
      },
      /* 删除墙面 */
      removeWall : function (index) {

        this.$confirm('是否确认删除该墙面信息，删除时将同步删除墙面下级关联节点！', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',

          type: 'warning'
        }).then(() => {

          //根据子组件传递的index删除父组件当中的墙面数组当中的墙面数据
          var removeObj = this.roomForm.wallDataArrs.splice(index,1);

          if(removeObj!=null&&removeObj!=""){
            this.$http.post("/iepsapi/fhfz/sceneSettings/deleteWall?", {removeObj}).then((res) => {
              this.$message({
                type: 'success',
                message: '删除成功!'
              });
            })
          }else{
            this.$message({
              type: 'success',
              message: '删除成功!'
            });
          }

        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });

      },
      /* 复制墙面 */
      cloneWall : function (index) {
        //根据子组件传递的index，在index后的位置，复制一个相同的墙面节点
        var wallData = this.roomForm.wallDataArrs[index];

        var windowDataArrsFrom = wallData.windowDataArrs;

        var windowDataArrsNew = [];

        if(windowDataArrsFrom!=null&&windowDataArrsFrom.length>0){
          for (var i = 0;i<windowDataArrsFrom.length;i++) {
            var windowDataFrom = windowDataArrsFrom[i];
            var newWindowData = this.cloneObj(windowDataFrom);
            newWindowData.window_id = '';
            windowDataArrsNew.push(newWindowData);
          }
        }

        var newWallData = {
          wall_id : '', //墙面id
          wall_name : wallData.wall_name, //墙面名称
          wall_location : wallData.wall_location, //墙面位置
          wall_thick : wallData.wall_thick, //墙面厚度
          wall_width : wallData.wall_width,//墙面高度
          wall_length : wallData.wall_length,//长度
          wall_angle : wallData.wall_angle,//墙面倾斜角度
          wall_structure : wallData.wall_structure,//材质
          windowDataArrs: windowDataArrsNew
        };
        this.roomForm.wallDataArrs.splice(index+1,0,newWallData);


        for(var i = 0;i<this.roomForm.wallDataArrs.length;i++){
          var wall = this.roomForm.wallDataArrs[i];
          var windows = wall.windowDataArrs;
          for(var j = 0;j<windows.length;j++){
            var window = windows[j];
            window.wallIndex = i;
          }
        }

      }
    }
  }
</script>



<style scoped >

  .floorBox{
    width: 100%;
    margin-top: 1vh;
    background: inherit;
    color: white;
    min-height: 20vh;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    border-width: 1px;
    border-style: solid;
    border-color: rgba(81,101,205, 1);
    border-radius: 5px;
    -webkit-box-shadow: 0px 2px 1px rgba(0, 0, 0, 0.345098039215686);
    box-shadow: 0px 2px 1px rgba(0, 0, 0, 0.345098039215686);
    font-size: 2vh;
    text-align: right;
  }

  .floorInfo{
    padding-top: 0.5vh;
    width: 99%;
    margin: 0 auto;
    height: 6vh;
    color: white;
    font-size: 1.8vh;
    text-align: left;
    float: left;
  }

  /deep/ .el-dialog, .el-pager li {
    background: #202B61;
    -webkit-box-sizing: border-box;
  }


  /deep/ .el-dialog__header {
    padding: 20px 20px 10px;
    color: #FFF;
    background: #374590;
  }

  /deep/ .el-dialog__title {
    line-height: 15px;
    font-size: 16px;
    color: #FFF;
  }

  /deep/ .el-input__inner {
    -webkit-appearance: none;
    background-color: #161E43;
    background-image: none;
    border-radius: 4px;
    border: 1px solid #161E43;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    color: #4891EE;
    display: inline-block;
    font-size: inherit;
    height: 40px;
    line-height: 40px;
    outline: 0;
    padding: 0 15px;
    -webkit-transition: border-color .2s cubic-bezier(.645,.045,.355,1);
    transition: border-color .2s cubic-bezier(.645,.045,.355,1);
    width: 100%;
  }


  /deep/ .el-input__inner {
    -webkit-appearance: none;
    background-color: #161E43;
    background-image: none;
    border-radius: 4px;
    border: 1px solid #161E43;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    color: #FFFFFF;
    display: inline-block;
    font-size: inherit;
    height: 40px;
    line-height: 40px;
    outline: 0;
    padding: 0 15px;
    -webkit-transition: border-color .2s cubic-bezier(.645,.045,.355,1);
    transition: border-color .2s cubic-bezier(.645,.045,.355,1);
    width: 100%;
  }

  /deep/ .el-form-item__label {
    text-align: right;
    vertical-align: middle;
    float: left;
    font-size: 14px;
    color: #FFF !important;
    line-height: 40px;
    padding: 0 12px 0 0;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
  }


  .box1{
    position: relative;
    width: 100%;
    background: inherit;
    background-color: rgba(45, 61, 136, 0.6);
    color: white;
    min-height: 45vh;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    border-width: 1px;
    border-style: solid;
    border-color: rgba(226, 239, 249, 1);
    border : none;
    border-radius: 5px;
    -webkit-box-shadow: 0px 2px 1px rgba(0, 0, 0, 0.345098039215686);
    box-shadow: 0px 2px 1px rgba(0, 0, 0, 0.345098039215686);
    font-size: 2vh;
    text-align: right;
  }

  .box2{
    position: relative;
    width: 100%;
    min-height: 25vh;
    margin-top:0.5%;
    background: inherit;
    background-color: rgba(45, 61, 136, 0.6);
    color: white;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    border-width: 1px;
    border-style: solid;
    border-color: rgba(226, 239, 249, 1);
    border : none;
    border-radius: 5px;
    -webkit-box-shadow: 0px 2px 1px rgba(0, 0, 0, 0.345098039215686);
    box-shadow: 0px 2px 1px rgba(0, 0, 0, 0.345098039215686);
    font-size: 2vh;
    text-align: right;
  }




  .title{
    width:100%;
    height:5vh;
    line-height: 5vh;
    background:rgba(55, 69, 144, 1);

    font-weight:bold;
    background: inherit;
    -webkit-box-shadow: none;
    box-shadow: none;
    font-family: 'Arial Negreta', 'Arial Normal', 'Arial';
    font-weight: 700;
    font-style: normal;
    font-size: 1.5vh;
    color: #FFFFFF;
    text-align: left;
    box-sizing: border-box;
    border-width: 1px;
    border-style: solid;
    border-color: rgba(55, 69, 144, 1);
    border-radius: 1px;
    -moz-box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.345098039215686);
    -webkit-box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.345098039215686);
    box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.345098039215686);
  }


</style>
